<!--广告位列表展示组件-->
<template>
  <div class="AdvertiseSpaceList">
    <el-card class="box-card">
      <el-button size="mini" class="addSpace" @click="addSpace">添加广告位</el-button>
      <el-table
        :data="spaceList"
        border
        style="width: 100%">
        <el-table-column
          prop="spaceKey"
          label="spaceKey"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="广告位名称"
          align="center">
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          align="center">
          <template slot-scope="scope">
            <span>{{scope.row.updateTime | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="80px">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="spaceListEdit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllSpaces } from '@/services/ad'
export default {
  name: 'AdvertiseSpaceList',
  data () {
    return {
      spaceList: []
    }
  },
  created () {
    this.getAllSpaces()
  },
  methods: {
    // 获取当前广告位列表
    async getAllSpaces () {
      const { data } = await getAllSpaces()
      console.log(data)
      if (data.state === 1) {
        this.spaceList = data.content
      }
    },
    // 增加广告位
    addSpace () {
      this.$router.push({ name: 'addAdvertise-space' })
    },
    // 广告位编辑
    spaceListEdit (id) {
      this.$router.push({ name: 'addAdvertiseSpaceDe', params: { id } })
    }
  },
  filters: {
    timeFilter (val) {
      function time (value) {
        if (value < 10) {
          return '0' + value
        }
        return value
      }
      const date = new Date(val)
      return `
        ${date.getFullYear()}-${time(date.getMonth() + 1)}-${time(date.getDate())}
        ${time(date.getHours())}:${time(date.getMinutes())}:${time(date.getSeconds())}
      `
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body{
  padding: 20px 0 !important;
}
.el-table{
  margin-top: 20px !important;
}
.addSpace {
  margin-left: 20px;
}
</style>
